/**
* @name 已配送
* @description:
* @param
* @return
*/
<template>
	<view class="order">
		<!-- 日历 -->
		<calendar @changeCalendar="changeCalendar($event)"></calendar>

		<template v-if="records.length">
			<view class="orderCard" v-for="(items, idxs) of records" :key="idxs">
				<view class="orderHeader">
					<view class="orderHeaderItem">订单号：{{items.code}}</view>
					<view class="orderHeaderItem">
						下单时间：{{formDate(new Date(items.xdtm)) + " " + formTime(new Date(items.xdtm))}}
					</view>
					
					<view class="orderHeaderItem">
						<template v-if="items.paytm">
							支付时间：{{formDate(new Date(items.paytm)) + " " + formTime(new Date(items.paytm))}}
						</template>
						<template v-else>
							支付时间：暂无
						</template>
					</view>
					
					<view class="orderHeaderItem">
						<template v-if="items.jdtm">
							接单时间：{{formDate(new Date(items.jdtm)) + " " + formTime(new Date(items.jdtm))}}
						</template>
						<template v-else>
							接单时间：暂无
						</template>
					</view>
					
					<view class="orderHeaderItem">
						<template v-if="items.pstm">
							配送时间：{{formDate(new Date(items.pstm)) + " " + formTime(new Date(items.pstm))}}
						</template>
						<template v-else>
							配送时间：暂无
						</template>
					</view>
					
					<view class="orderHeaderItem">配送费：{{items.sendcost}}元</view>
					<view class="orderHeaderItem">订单金额：{{items.ordercost}}元</view>
					<view class="orderHeaderItem">总计：{{items.ordercosts}}元</view>
					
					<view class="btns">
						<u-button class="btn" type="error" size="mini" @click="showDeliveryModal(items)">查看配送</u-button>
					</view>
				</view>

				<view class="orderContainer">
					<view class="orderList" v-for="(item,idx) of items.orderitms" :key="idx">

						<!-- 图片 -->
						<image class="img" :src="imgUrl(JSON.parse(item.exptxt).content.main.pic)"></image>

						<!-- 内容 -->
						<view class="orderListBox">

							<!-- 标题 -->
							<view class="orderListTitle">{{JSON.parse(item.exptxt).title}}</view>

							<!-- 主菜 -->
							<view class="orderListItem" v-if="!JSON.parse(item.exptxt).content.side.id && 
								!JSON.parse(item.exptxt).content.vegetables.id && 
								!JSON.parse(item.exptxt).content.staple.id && 
								!JSON.parse(item.exptxt).content.other.length">
								<template v-if="JSON.parse(item.exptxt).content.main.description">
									主菜：{{JSON.parse(item.exptxt).content.main.title}} + {{JSON.parse(item.exptxt).content.main.description}}
								</template>
								<template v-else>
									主菜：{{JSON.parse(item.exptxt).content.main.title}}
								</template>
							</view>
							<view class="orderListItem" v-else>
								主菜：{{JSON.parse(item.exptxt).content.main.title}}
							</view>

							<!-- 副菜 -->
							<view v-if="JSON.parse(item.exptxt).content.side.id" class="orderListItem">
								副菜：{{JSON.parse(item.exptxt).content.side.title}}
							</view>

							<!-- 青菜 -->
							<view v-if="JSON.parse(item.exptxt).content.vegetables.id" class="orderListItem">
								青菜：{{JSON.parse(item.exptxt).content.vegetables.title}}
							</view>

							<!-- 小食 -->
							<view v-if="JSON.parse(item.exptxt).content.staple.id" class="orderListItem">
								小食：{{JSON.parse(item.exptxt).content.staple.title}}
							</view>

							<!-- 其他 -->
							<view class="orderListItem" v-if="JSON.parse(item.exptxt).content.other.length">
								其他：
								<text v-for="(otherItem,otherIdx) of JSON.parse(item.exptxt).content.other"
								 :key="otherIdx">
									{{otherItem.title + ' '}}
								</text>
							</view>

						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<u-loadmore :status="status" />
		</template>

		<template v-else>
			<view class="empty">空空如也~</view>
		</template>

		<!-- loading -->
		<wyb-loading ref="loading" />
		
		<!-- 配送信息弹窗 -->
		<u-modal v-model="deliveryModalShow" :content-style="{padding:'20rpx'}">
			<view>
				<view>
					配送骑手：{{couriername}}
				</view>
				<view>
					配送电话：{{courierphone}}
				</view>
				<view>
					<template v-if="pdtime">
						配送时间：{{formDate(new Date(pdtime)) + " " + formTime(new Date(pdtime))}}
					</template>
					<template v-else>
						配送时间：暂无
					</template>
				</view>
				<view>
					配送类型：{{type === 1 ? '自配送' : '美团配送'}}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import * as api from '@/api/apiList/user/billSummary.js'; //查看订单
	import * as orderApi from "@/api/apiList/user/order.js"//订单配送

	import calendar from "@/components/calendar.vue"

	export default {
		components: {
			calendar
		},
		data() {
			return {
				records: [], //订单列表
				state: 4, //状态 1、待支付、2待接单，3，已接单，4，已配送
				current: 1, //第几页
				pages: 0, //共有多少页
				sday: this.formDate(new Date()), //日期
				status: "loadmore" ,//loading状态
				deliveryModalShow:false,//配送信息弹窗
				couriername:"",//配送人
				courierphone:"",//配送电话
				pdtime:"",//配送时间
				type:""//配送类型
			}
		},
		watch: {
			sday: { //监听日期切换更改订单列表
				handler(val) {
					this.init(this.state, 1, val)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			async API_order(state, current, sday) {
				//查看订单接口
				let result = {
					page: {
						current, //第几页
						size: 5 //每页显示多少条数据
					},
					param: {
						state, //状态 1、待支付、2待接单，3，已接单，4，已配送
						sday, //日期
					}
				};
				return await api.list(result);
			},
			async API_delivery(oid){//订单配送
				let result = {
					param:{
						oid//订单id
					}
				}
				return await orderApi.delivery(result)
			},
			changeCalendar(value) { //日期查询
				this.sday = value
			},
			async init(state, current, sday) { //初始化
				this.$nextTick(() => {
					this.$refs.loading.showLoading() // 显示
				})
				let res = await this.API_order(state, current, sday)
				if (res.data.code === 1000) {
					this.records = res.data.data.records //订单数据
					this.current = res.data.data.current //当前第几页
					this.pages = res.data.data.pages //共有多少页
				}
				this.$refs.loading.hideLoading() // 隐藏
			},
			async reachBottom() { //上拉加载更多
				if (this.current >= this.pages) return//如果当前页到最后一页停止加载
				
				this.status = 'loading'
				this.current++
				this.$refs.loading.showLoading() // 显示
				let res = await this.API_order(this.state, this.current, this.sday);
				if (res.data.code === 1000) {
					let orderList = res.data.data.records //获取订单
					this.records.push(...orderList)
					if(this.current >= this.pages) this.status = 'nomore'
					else this.status = 'loading'
				}
				this.$refs.loading.hideLoading() // 隐藏
			},
			pullDownRefresh() { //下拉刷新
				this.init(this.state, this.current, this.sday)
			},
			async showDeliveryModal(val){//显示配送弹窗
				this.deliveryModalShow = true
				let res = await this.API_delivery(val.id)
				if(res.data.code === 1000){
					this.couriername = res.data.data.couriername//配送人
					this.courierphone = res.data.data.courierphone//配送电话
					this.pdtime = res.data.data.pdtime//配送时间
					this.type = res.data.data.type//配送类型
					console.log(res)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order{
		height: 100%;
		.orderCard {
			//订单卡片
			border-bottom: 8px solid #f8f2f2;
		
			.orderHeader {
				//订单卡片头部
				border-bottom: 1px solid #f0f0f0;
				padding: 10rpx;
				box-sizing: border-box;
		
				.orderHeaderItem {
					//订单卡片头部选项
					padding: 5px 0 5px 10px;
				}
				
				.btns {
					//按钮
					display: flex;
					justify-content: flex-end;
				
					.btn {
						margin: 0 10rpx;
					}
				}
			}
		
			.orderContainer {
				//订单卡片内容
				padding: 20rpx;
				box-sizing: border-box;
		
				.orderList {
					//订单列表
					display: flex;
					margin: 10rpx 0;
		
					// 图片
					.img {
						width: 240rpx;
						height: 180rpx;
						overflow: hidden;
						border-radius: 30rpx;
						margin-right: 10rpx;
					}
		
					// 内容区
					.orderListBox {
						flex: 1;
		
						// 标题
						.orderListTitle {
							font-size: 28rpx;
						}
		
						// 成员
						.orderListItem {
							font-size: 24rpx;
							color: #82848A;
						}
					}
		
				}
			}
		}
		
		// 空空如也
		.empty {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
</style>
